<template>
  <p style="color: red">
    全局组件注册，包括自定义组件，vant组件，在component/vant/index中
  </p>
  <demo-name></demo-name>
  <h1>以下是vant组件引用</h1>
  <van-button plain hairline type="success" @click="methods.click"
    >主要按钮</van-button
  ><br />
  输入的用户名:<span>{{ attributes.username }}</span
  ><br />
  输入的密码:<span>{{ attributes.password }}</span
  ><br />
  <p style="color: red">
    过滤器:<span>{{ filterMainStayId(attributes.mainStayId) }}</span>
  </p>
  <p style="color: red">
    过滤器:<span>交易状态：{{ filterStatus(attributes.status) }}</span>
  </p>
  <hr />
  <hr />
  <van-form @submit="methods.onSubmit" @failed="methods.onFailed">
    <van-cell-group inset>
      <van-field
        v-model="attributes.username"
        name="username"
        label="用户名"
        placeholder="请输入用户名"
        :rules="[
          {
            pattern: sixNumber,
            required: true,
            message: '请填写6位数字用户名',
          },
        ]"
      ></van-field>
      <van-field
        v-model="attributes.password"
        name="password"
        type="password"
        label="密码"
        placeholder="请输入密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      ></van-field>
      <!-- 通过 validator 返回错误提示 -->
      <van-field
        v-model="attributes.value3"
        name="validatorMessage"
        label="错误提示"
        placeholder="校验函数返回错误提示"
        :rules="[{ validator: methods.validatorMessage }]"
      />
      <!-- 通过 validator 进行异步函数校验 -->
      <van-field
        v-model="attributes.value4"
        name="asyncValidator"
        label="异步函数校验"
        placeholder="异步函数校验"
        :rules="[
          { validator: methods.asyncValidator, message: '请输入正确内容1234' },
        ]"
      />
    </van-cell-group>
    <van-button plain hairline block round type="primary" native-type="submit"
      >提交</van-button
    >
  </van-form>
  <van-divider>文字</van-divider>
</template>

<script>
import { reactive, getCurrentInstance } from 'vue'
import { closeToast, showLoadingToast, showToast } from 'vant'

export default {
  name: 'App',
  setup() {
    const instance = getCurrentInstance()
    let { proxy } = instance
    console.log('Vue3中的this:', proxy)
    const attributes = reactive({
      name: '洪奇奇',
      age: 18,
      job: {
        type: 'IT',
        salary: '18K',
      },
      username: '',
      password: '',
      value3: '',
      value4: '',
      mainStayId: '1',
      status: '0',
    })
    const sixNumber = /\d{6}/
    async function click() {
      showToast('点击')
      console.log('触发了click')
      const modules = await import('./utils/index.js')
      console.log('modules:', modules)
    }
    function mousedown(params) {
      console.log('触发了mousedown', params)
    }
    function mouseup() {
      console.log('触发了mouseup')
    }
    function some() {
      console.log('触发了some')
    }
    function onSubmit(value) {
      console.log('onSubmit:', value)
    }
    function onFailed(err) {
      console.log('onFailed:', err)
    }
    function validatorMessage(val) {
      return `${val}不合法，请重新输入`
    }
    function asyncValidator(val) {
      return new Promise((resolve) => {
        showLoadingToast('验证中...')
        setTimeout(() => {
          closeToast()
          resolve(val == '1234')
        }, 500)
      })
    }
    return {
      attributes,
      methods: {
        click,
        mousedown,
        mouseup,
        some,
        onSubmit,
        onFailed,
        validatorMessage,
        asyncValidator,
      },
      sixNumber,
    }
  },
}
</script>
<style scoped>
.div {
  /* width: 100px; */
  height: 100px;
  background: red;
  position: absolute;
  z-index: 99;
}
.video {
  z-index: -99;
}
</style>
